/**
* @Author: zmx
* @Date: 2023/9/25
* @Description:
*/
<template>
  <div style="padding: 20px">
    <el-form :inline="true" :model="formInline">
      <el-form-item label="市选择">
        <el-select
          v-model="formInline.cityId"
          value-key="id"
          filterable
          clearable
          style="width: 200px"
          @change="changeCity"
        >
          <el-option
            v-for="item in optionsListCity"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="区选择" v-if="optionsListDist">
        <el-select
          v-model="formInline.districtId"
          value-key="id"
          filterable
          clearable
          style="width: 200px"
          @change="changeDist"
        >
          <el-option
            v-for="item in optionsListDist"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="站选择">
        <el-select
          v-model="formInline.stationId"
          value-key="id"
          filterable
          clearable
          style="width: 200px"
          @change="changeStation"
        >
          <el-option
            v-for="item in optionsListStation"
            :key="item.id"
            :label="item.staName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="桩选择">
        <el-select
          v-model="formInline.stakeId"
          value-key="id"
          filterable
          clearable
          style="width: 200px"
        >
          <el-option
            v-for="item in optionsListState"
            :key="item.id"
            :label="item.devName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="报告名称">
        <el-input v-model="formInline.reportName" placeholder="报告名称"></el-input>
      </el-form-item>
      <el-form-item label="对象类型">
        <el-select
          v-model="formInline.objectType"
          value-key="id"
          filterable
          clearable
        >
          <el-option
            v-for="item in optionsList"
            :key="item.id"
            :label="item.itemObjectName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="风险等级">
        <el-select
          v-model="formInline.riskLevel"
          value-key="id"
          filterable
          clearable
        >
          <el-option
            v-for="item in riskClassList"
            :key="item.riskClass"
            :label="item.text"
            :value="item.riskClass"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="确认告警">
        <el-select
          v-model="formInline.isAlarm"
          value-key="id"
          filterable
          clearable
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="reset">清空</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%" :header-cell-style="{background:'#006175',color:'#fff'}">
      <el-table-column label="序号" width="50">
        <template v-slot="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="reportName" label="报告名称" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="cityName" label="市" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="districtName" label="区" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="stationName" label="站" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="stakeName" label="桩" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="objectType" label="对象类型" v-if="optionsList">
        <template v-slot="scope">
          {{ getObjectType(scope.row.objectType) }}
        </template>
      </el-table-column>
      <el-table-column prop="reportDesc" label="风险详情">
        <template v-slot="scope">
          <el-tooltip placement="top">
            <div v-html="toBreak(scope.row.reportDesc)" slot="content"></div>
            <div class="longValue">{{scope.row.reportDesc}}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="riskValue" label="风险等级" v-if="riskClassList">
        <template v-slot:header>
          <span>风险等级</span>
          <el-tooltip placement="top">
            <div v-html="toBreak(riskClassTip)" slot="content"></div>
            <i class="el-icon-question"></i>
          </el-tooltip>
        </template>
        <template v-slot="scope">
          <span :class="getRiskClassInfo(scope.row.riskValue, false)">{{ getRiskClassInfo(scope.row.riskValue, true) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="maintainAdvice" label="维护建议">
        <template v-slot="scope">
          <el-tooltip placement="top">
            <div v-html="toBreak(scope.row.maintainAdvice)" slot="content"></div>
            <div class="longValue">{{scope.row.maintainAdvice}}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="isAlarm" label="确认告警">
        <template v-slot="scope">
          <span v-if="scope.row.isAlarm === 1">已确认</span>
          <span v-else>待确认</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template v-slot="scope">
          <el-button class="common-btn" @click="detailReport(scope.row)">详情</el-button>
          <el-button v-show="scope.row.isAlarm === 0" class="common-btn" @click="confirmReport(scope.row)">确认</el-button>
          <el-button v-show="scope.row.isAlarm === 1" class="delete-btn" @click="deleteReport(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 20px"
      :page-size="formInline.pageSize"
      layout="total, sizes, pager, next, jumper"
      @current-change="refreshPageByCondition"
      @size-change="handleSizeChange"
      :current-page.sync="formInline.pageNumber"
      :total="total">
    </el-pagination>
    <riskReportDialog v-if="ReportDialogShow"
      :ReportDialogShow="ReportDialogShow"
      :reportDetail="reportDetail"
      @closeDialog="closeDialog"></riskReportDialog>
  </div>
</template>

<script>
import {getRiskReportQuery, getRiskClass, getReportConfirm, deleteReport} from "../../api/risk/riskTask"
import riskReportDialog from "./riskReportDialog"
import {plan, warn} from "../../api/inspection/apiUntil";
import {getWarnStake} from "../../api/inspection/warn";
import {getItemDictObject} from "../../api/risk/commonDict";

export default {
  components:{
    riskReportDialog
  },
  data() {
    return {
      options:[
        {
          name:'已确认',
          value:'1'
        },
        {
          name:'待确认',
          value:'0'
        },
      ],
      optionsList:[],
      optionsListCity: [],
      optionsListDist: [],
      optionsListStation: [],
      optionsListState: [],
      tableData: [],
      riskClassList: [],
      reportId: '',
      riskClassTip: '',
      reportDetail: {},
      ReportDialogShow: false,
      formInline: {
        reportName: '',
        cityId: '',
        districtId: '',
        stationId: '',
        pageSize: 10,
        pageNumber: 1
      },
      total: 0
    }
  },
  mounted() {
    this.getInit()
    this.getPlanCity()
  },
  methods: {
    handleSizeChange(val) {
      this.formInline.pageSize = val
      this.getInit()
    },
    //城市列表
    getPlanCity() {
      plan.getPlanCity().then((res) => {
        this.optionsListCity = res.data
        this.initDist()
      })
    },
    changeCity() {
      this.formInline.districtId = ''
      this.initDist()
    },
    initDist() {
      if (this.optionsListCity && this.formInline.cityId) {
        this.optionsListDist = this.optionsListCity.find(city => city.id === this.formInline.cityId).children
      }
      if (this.formInline.districtId) {
        this.initStat()
      }
    },
    changeDist() {
      this.formInline.stationId = ''
      this.initStat()
    },
    initStat() {
      let params = {
        id: this.formInline.districtId
      }
      plan.getPlanStat(params).then((res) => {
        this.optionsListStation = res.data
        if (this.formInline.stationId) {
          this.changeStation()
        }
      })
    },
    changeStation() {
      let params = {
        id: this.formInline.stationId
      }
      warn.getWarnStake(params).then((res) => {
        this.optionsListState = res.data
      })
    },
    reset() {
      this.formInline.reportName = ''
      this.formInline.cityId = ''
      this.formInline.districtId = ''
      this.formInline.stationId = ''
      this.formInline.stakeId = ''
      this.formInline.isAlarm = ''
      this.formInline.objectType = ''
      this.formInline.riskLevel = null
      this.refreshPageByCondition()
    },
    confirmReport(report) {
      getReportConfirm({reportId:report.id}).then((res)=>{
        if(res && res.code === 200){
          this.$message({ message: '确认成功', type: 'success' })
          this.refreshPageByCondition()
        }
      }).catch(err => {
        this.$message({ message: '服务器异常：' + err, type: 'warning' })
      })
    },
    deleteReport(report) {
      this.$confirm('此操作将删除该报告, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteReport({reportId:report.id}).then((res)=>{
          if(res && res.code === 200){
            this.$message({ message: '删除成功', type: 'success' })
            this.refreshPageByCondition()
          }
        }).catch(err => {
          this.$message({ message: '服务器异常：' + err, type: 'warning' })
        })
      })
    },
    detailReport(report) {
      this.reportDetail = report
      this.reportDetail.level = this.getRiskClassInfo(report.riskValue, true)
      this.reportDetail.css = this.getRiskClassInfo(report.riskValue, false)
      this.reportDetail.cityName = report.cityName
      this.reportDetail.districtName = report.districtName
      this.reportDetail.stationName = report.stationName
      this.reportDetail.stakeName = report.stakeName
      this.reportDetail.riskClassTip = this.riskClassTip
      this.reportDetail.riskValue = report.riskValue
      this.ReportDialogShow = true
    },
    closeDialog() {
      this.ReportDialogShow = false
      this.refreshPageByCondition()
    },
    getInit(){
      getItemDictObject().then((res)=>{
        if(res){
          this.optionsList = res
        }
      }).catch(err => {
        this.$message({ message: '服务器异常：' + err, type: 'warning' })
      })
      this.refreshPageByInit()
      this.initRiskClassList()
    },
    getObjectType(type) {
      if (this.optionsList && this.optionsList.length > 0) {
        let option = this.optionsList.find(item => item.id === type)
        return option ? option.itemObjectName : ''
      }
      return ''
    },
    initRiskClassList() {
      getRiskClass().then(res => {
        this.riskClassList = res
        let content = ''
        for (let i = 0; i < this.riskClassList.length; i++) {
          this.riskClassList[i].text = this.getText(this.riskClassList[i].riskClass)
          this.riskClassList[i].color = this.getColor(this.riskClassList[i].riskClass)
          content += '分值范围:' + this.riskClassList[i].riskValue + ',对应风险等级:' + this.riskClassList[i].text + '\n'
        }
        this.riskClassTip = content;
      }).catch(err => {
        this.$message({ message: '服务器异常：' + err, type: 'warning' })
      })
    },
    getRiskClassInfo(value, isText) {
      if (this.riskClassList) {
        for (let i = 0; i < this.riskClassList.length; i++) {
          let range = this.riskClassList[i].riskValue.split(/-/)
          if (range[1] === '') {
            if (Number(range[0]) <= value) {
              return isText ? this.riskClassList[i].text : this.riskClassList[i].color
            }
          } else {
            if (Number(range[0]) <= value && Number(range[1]) > value) {
              return isText ? this.riskClassList[i].text : this.riskClassList[i].color
            }
          }
        }
      }
      return isText ? '低风险' : 'risk-color-green'
    },
    getColor(value) {
      switch (value) {
        case 5:
          return 'risk-color-red'
        case 4:
          return 'risk-color-orange'
        case 3:
          return 'risk-color-yellow'
        default:
          return 'risk-color-green'
      }
    },
    getText(value) {
      switch (value) {
        case 5:
          return '重大风险'
        case 4:
          return '高风险'
        case 3:
          return '中等风险'
        default:
          return '低风险'
      }
    },
    search() {
      this.refreshPageByCondition()
    },
    refreshPageByInit() {
      this.refreshPage({page: this.formInline.pageNumber - 1,
        size: this.formInline.pageSize})
    },
    refreshPageByCondition() {
      let params = {
        reportName: this.formInline.reportName,
        cityId: this.formInline.cityId,
        districtId: this.formInline.districtId,
        stationId: this.formInline.stationId,
        stakeId: this.formInline.stakeId,
        isAlarm: this.formInline.isAlarm,
        riskLevel: this.formInline.riskLevel,
        objectType: this.formInline.objectType,
        source: 'web',
        page: this.formInline.pageNumber - 1,
        size: this.formInline.pageSize
      }
      this.refreshPage(params)
    },
    refreshPage(params) {
      getRiskReportQuery(params).then((res)=>{
        if(res){
          this.tableData = res.reportList
          this.total = res.reportListSize
        }
      }).catch(err => {
        this.$message({ message: '服务器异常：' + err, type: 'warning' })
      })
    },
    toBreak(val) {
      if (val) {
        return val.split('\n').join('<br/>')
      }
      return ''
    }
  }
};

</script>

<style scoped>
.risk-color-red {
  color: red;
}

.risk-color-green {
  color: green;
}

.risk-color-orange {
  color: orange;
}

.risk-color-yellow {
  color: gold;
}
.longValue {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
